<template>
  <div class="home">
    <div class="home-head-per">
      <div class="home-head">
        <span>首页</span>
      </div>
      <div class="home-head-content">
        <!-- {{userStore.organization.organizationName}} / {{userStore.name}}({{userStore.username}}) -->
        <div class="head-content-name">您好！{{getH5Name()}}<span>({{getH5Username()}})</span></div>
        <div class="head-content-info">
          <p>登录日期：{{today}}</p>
          <!-- <p>账套：[005]广州市XX区教育局(收支业务)</p> -->
        </div>
      </div>
    </div>
    <div class="home-content-list">
      <van-cell-group>
        <van-cell title="修改密码" is-link size="large" />
        <van-cell title="切换账号" is-link size="large" />
        <van-cell title="签名采集" is-link @click="signatureBtn" size="large" />
        <van-cell title="浏览器兼容说明" is-link size="large" />
        <van-cell title="本地选项设置" is-link size="large" />
        <van-cell title="当前版本号" value="E3DSF-0002423497329047" size="large" />
        <van-cell title="退出登录" is-link @click="gotoLogin" size="large" />
      </van-cell-group>
    </div>
    <tabBar :routeActive="3"></tabBar>
    <van-popup v-model:show="isShowModel" :closeable="true" >
      <signature @close="closeBtn"></signature>
    </van-popup>
  </div>
</template>

<script setup>
import tabBar from '@/h5/components/tabbar.vue';
import {parseTime} from "@/utils/ruoyi";
import useUserStore from '@/store/modules/user';
import { useRouter } from "vue-router";
import {getH5UserId, getH5Username, getH5Name} from "@/config/cookie";
import signature from '@/h5/components/signature.vue';

// import { showConfirmDialog } from 'vant';
  const today = parseTime(new Date().getTime(), '{y}-{m}-{d}');//new Date().pattern("yyyy年MM月dd日"),
  const router = useRouter();
  const userStore = useUserStore();
  console.log("userStore",userStore)
  let isShowModel = ref(false)
  let signatureImg = ref(null)
  function gotoLogin() {
    // showConfirmDialog
    useUserStore().h5Logout().then(() => {
      router.push('/h5_login')
    })
  }
  const signatureBtn = () => {
    isShowModel.value = true
  }
  const closeBtn = () => {
    isShowModel.value = false
  }
  
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.home-head-per {
  width: 100%;
  overflow: hidden;
}
.home-head {
  width: 100%;
  height: 8rem;
  background: #dfc059;
  text-align: center;
  overflow: hidden;
  & span {
    display: inline-block;
    color: #fff;
    font-size: 1.25rem;
    margin-top: 1.25rem;
  }
}
.home-head-content {
  width: 80%;
  // height: 8rem;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 4rem;
  margin-left: -40%;
  box-shadow:0 0 12px var(--van-gray-5);
  padding: .625rem;
  .head-content-name {
    color: black;
    font-weight: 500;
    font-size: 1.2rem;
    & span {
      color: var(--van-gray-6);
    } 
  }
  .head-content-info {
    color: var(--van-gray-6);
    margin-top: .3125rem;
  }
}
.home-content-list {
  margin-top: 5.625rem;
  // width: 100%;
  // padding: 1.25rem 0;
  // margin-top: 5.625rem;
  // background: #fff;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.home-content-list span {
  color: var(--van-primary-color);
}
.home-content-link {
  margin-top: 1.25rem;
}
.custom-title {
  padding-left: .9375rem;
  color: var(--van-primary-color);
  font-size: 1rem;
}
.home-content-link .van-cell {
  padding: 1.25rem .9375rem;
}
.danger-color {
  color: var(--van-danger-color);
}
.list-info {
  padding: .9375rem 0;
  text-align: center;
  background: #fff;
}
</style>

